<template>
    <div>
        <div class="quanping">
            <el-row type="flex" justify="center">
                <el-col :span="16">
                    <div class="mohu">
                        <el-breadcrumb separator="/" class="suozai">
                            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>物业服务</el-breadcrumb-item>
                            <el-breadcrumb-item>报修管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <div class="fangke">
                            报修管理
                        </div>
                        <el-divider></el-divider>
                        <div class="cha">
                            <el-row type="flex" justify="center">
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="12" class="kuang">
                                            住户类型：
                                            <el-select v-model="leixing" placeholder="请选择住户类型" size="mini" clearable>
                                                <el-option
                                                v-for="item in householdType"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                        <el-col :span="12" class="kuang">
                                            报修状态：
                                            <el-select v-model="maintenanceStatus" placeholder="请选择报修状态" size="mini" clearable>
                                                <el-option
                                                v-for="item in repairStatus"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row type="flex" justify="center">
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="10" class="kuang">
                                            <div class="block">
                                                <span class="demonstration">预约日期：</span>
                                                <el-date-picker
                                                size="mini"
                                                v-model="makeDate"
                                                type="daterange"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期">
                                                </el-date-picker>
                                            </div>
                                        </el-col>
                                        <el-col :span="6" class="kuang">
                                            <el-button type="text" @click="today()" style="margin-left:10px;">今日</el-button>
                                            <el-button type="text" @click="yesterday()" style="margin-left:10px;">昨日</el-button>
                                            <el-button type="text" @click="week()" style="margin-left:10px;">最近7天</el-button>
                                            <el-button type="text" @click="month()" style="margin-left:10px;">最近30天</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row type="flex" justify="center">
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="16" class="kuang">
                                            精确查询：
                                            <el-select v-model="accurate" size="mini" clearable>
                                                <el-option
                                                v-for="item in preciseqQuery"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                            <el-input v-model="accurates" placeholder="请输入" class="xm" size="mini" clearable style="margin-left:20px;"></el-input>
                                        </el-col>
                                        <el-col :span="8" class="kuang">
                                            <el-button type="primary" size="mini" @click="getReportList()">查询</el-button>
                                            <el-button size="mini" @click="chongzhi()">重置</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="16">
                    <div class="zhuye">
                        <el-row type="flex" justify="center">
                            <el-col :span="22">
                                <div class="piliang">
                                    <span style="float:left;">报修列表</span>
                                    <el-button size="mini" style="float:right;margin-top: 15px;">批量操作</el-button>
                                    <el-button type="primary" size="mini" style="float:right;margin-top: 15px;margin-right:10px;" @click="dialogFormVisible = true">新建</el-button>
                                </div>
                                <el-card>
                                    <el-table :data="reportData" border element-loading-text="数据加载中" @selection-change="handleSelectionChange" highlight-current-row fit v-loading="listLoading">
                                        <el-table-column type="selection" width="45"></el-table-column>
                                        <el-table-column align="center" label="报修房屋" prop="houseForRepair" width="230"/>
                                        <el-table-column label="维修项目" prop="maintenanceItems" width="120"/>
                                        <el-table-column label="维修状态" width="80">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.maintenanceStatus == '0'" style="color:#ADAF5D;">审核中</span>
                                                <span v-if="scope.row.maintenanceStatus == '1'" style="color:#58DE48;">审核通过</span>
                                                <span v-if="scope.row.maintenanceStatus == '2'" style="color:#EA525D;">审核不通过</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="标题" prop="title" width="100"/>
                                        <el-table-column label="报修人" prop="hname" width="100"/>
                                        <el-table-column label="预约日期" prop="orderDate" width="120"/>
                                        <el-table-column align="center" label="操作" width="180">
                                        <template slot-scope="scope">
                                            <el-button type="text" @click="reportFromExamine(scope.row.id)">审核</el-button>
                                            <el-button type="text" @click="reportFromCompile(scope.row)">编译</el-button>
                                            <el-button type="text" @click="reportFromDelete(scope.row.id)">删除</el-button>
                                        </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- 分页组件 -->
                                    <div class='block'>
                                        <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="currentPage4"
                                            :page-sizes="[5, 10, 15, 20]"
                                            :page-size="page.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="page.total">
                                        </el-pagination>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
            <!-- 新增弹框 -->
            <el-dialog :visible.sync='dialogFormVisible' class="slideDialog">
                <!-- 文件上传 -->
                <el-upload
                class='avatar-uploader'
                action=''
                :show-file-list='false'
                :on-success='handleAvatarSuccess'
                :before-upload='beforeAvatarUpload'
                >
                <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                </el-upload>
                <div :model='reportFrom' class="xinzen">
                    <div class="xinzen1">
                        <div style="float:left;">维修项目</div>
                        <div class="block">
                            <el-cascader
                                v-model="reportFrom.maintenanceItems"
                                :options="options">
                            </el-cascader>
                        </div>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">标题</div>
                        <el-input
                            style="width:200px;"
                            placeholder="请输入标题"
                            v-model="reportFrom.title"
                            clearable>
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">问题描述</div>
                        <el-input
                            style="width:200px;"
                            type="reportFrom.problemDescription"
                            :rows="4"
                            placeholder="请输入问题描述"
                            v-model="reportFrom.problemDescription">
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;margin-right:10px">报修用户</div>
                        <el-input placeholder="请选择报修用户" v-model="reportFrom.repairer" :disabled="true" style="float:left;">
                            <el-button slot="append" @click="baoxiu" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">预约日期</div>
                        <div class="block">
                            <el-date-picker
                            v-model="reportFrom.orderDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div slot='footer' class='dialog-footer'>
                    <el-button @click='dialogFormVisible = false'>取 消</el-button>
                    <el-button type='primary' @click="saveReport()">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改弹框 -->
            <el-dialog :visible.sync='dialogFormVisibleEdit' class="slideDialog">
                <!-- 文件上传 -->
                <el-upload
                class='avatar-uploader'
                action=''
                :show-file-list='false'
                :on-success='handleAvatarSuccess'
                :before-upload='beforeAvatarUpload'
                >
                <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                </el-upload>
                <div :model='reportFromEdit' class="xinzen">
                    <div class="xinzen1">
                        <div style="float:left;">维修项目</div>
                        <div class="block">
                            <el-cascader
                                v-model="reportFromEdit.maintenanceItems"
                                :options="options">
                            </el-cascader>
                        </div>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">标题</div>
                        <el-input
                            style="width:200px;"
                            placeholder="请输入标题"
                            v-model="reportFromEdit.title"
                            clearable>
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">问题描述</div>
                        <el-input
                            style="width:200px;"
                            type="reportFromEdit.problemDescription"
                            :rows="4"
                            placeholder="请输入问题描述"
                            v-model="reportFromEdit.problemDescription">
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;margin-right:10px">报修用户</div>
                        <el-input placeholder="请选择报修用户" v-model="reportFromEdit.repairer" :disabled="true" style="float:left;">
                            <el-button slot="append" @click="baoxiu" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">预约日期</div>
                        <div class="block">
                            <el-date-picker
                            v-model="reportFromEdit.orderDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div slot='footer' class='dialog-footer'>
                    <el-button @click='dialogFormVisibleEdit = false'>取 消</el-button>
                    <el-button type='primary' @click="editReport()">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 查询住户弹框 -->
            <el-dialog :visible.sync='dialogFormVisibles' class="slideDialog">
                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-row>
                            <el-col :span="16" class="kuang">
                                全部类型：
                                <el-select v-model="leixing" placeholder="请选择住户类型" size="mini" clearable>
                                    <el-option
                                    v-for="item in householdType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-input v-model="residentName" placeholder="请输入" class="xm" size="mini" clearable style="margin-left:20px;"></el-input>
                            </el-col>
                            <el-col :span="8" class="kuang">
                                <el-button type="primary" size="mini" @click="baoxiu()">查询</el-button>
                                <el-button size="mini" @click="chongzhi()">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-card>
                            <el-table :data="householdData" border element-loading-text="数据加载中" @selection-change="handleSelectionChange" highlight-current-row fit v-loading="listLoading">
                                <el-table-column align="center" label="序号" prop="id" width="60"/>
                                <el-table-column label="姓名" prop="hname" width="80"/>
                                <el-table-column label="类型" prop="householdType" width="70"/>
                                <el-table-column label="状态" width="90">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.start == '0'">审核中</span>
                                        <span v-if="scope.row.start == '1'">已认证</span>
                                        <span v-if="scope.row.start == '2'">认证失败</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="证件号码" prop="documentNumber" width="170"/>
                                <el-table-column label="手机号码" prop="hphone" width="140"/>
                                <el-table-column label="房间" prop="house" width="130"/>
                                <el-table-column align="center" label="操作" width="60">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="householdFrom(scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页组件 -->
                            <div class='block'>
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage4"
                                    :page-sizes="[5, 10, 15, 20]"
                                    :page-size="page.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="page.total">
                                </el-pagination>
                                
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-dialog>
            <!-- 审核弹框 -->
            <el-dialog :visible.sync='dialogFormVisibless' class="slideDialog">
                <div class="div1">
                    <el-steps :active="2" align-center>
                        <el-step title="提交维修信息" description="提交成功"></el-step>
                        <el-step title="审核中" description="物业审核中"></el-step>
                        <el-step title="维修指派" description="指派维修人员"></el-step>
                        <el-step title="完成维修" description="填写维修记录"></el-step>
                    </el-steps>
                </div>
                <el-divider></el-divider>
                <div class="div2">
                    <el-descriptions class="margin-top" title="无边框列表" :column="3">
                        <el-descriptions-item label="报修房屋">{{reportDatas.houseForRepair}}</el-descriptions-item>
                        <el-descriptions-item label="维修项目">{{reportDatas.maintenanceItems}}</el-descriptions-item>
                        <el-descriptions-item label="标题">{{reportDatas.title}}</el-descriptions-item>
                        <el-descriptions-item label="问题描述">{{reportDatas.problemDescription}}</el-descriptions-item>
                        <el-descriptions-item label="手机号码">{{reportDatas.hphone}}</el-descriptions-item>
                        <el-descriptions-item label="预约日期">{{reportDatas.orderDate}}</el-descriptions-item>
                        <el-descriptions-item label="报修人">{{reportDatas.hname}}</el-descriptions-item>
                        <el-descriptions-item label="附件"> <el-image style="width: 100px; height: 100px" :src="reportDatas.picture"></el-image></el-descriptions-item>
                    </el-descriptions>
                </div>
                <el-divider></el-divider>
                <div class="div3">
                    <el-button type="primary" size="mini" @click="shentong()">审核通过</el-button>
                    <el-button type="danger" size="mini" @click="butong()">审核不通过</el-button>
                    <el-button size="mini">返回</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
	data () {
        return{
            reportDatas:[],
            orderDate: '',
            residentName:'', // 住户姓名
            householdData: [], // 住户信息
            imageUrl: '',
            ddTime:'', // 时间选择
            leixing:'', // 住户类型
            maintenanceStatus: '', // 报修状态
            makeDate: [], // 预约时间
            accurate: '', // 精准类型
            accurates: '', // 准确信息
            start: '', // 起始时间
            end: '', // 结束时间
            reportData:[], // 报修信息
            listLoading: true, // 是否显示loading信息
            // 分页对象
			page: {
				// 每页条数
				pageSize: 10,
				// 分页页数
				pageNum: 1,
				// 分页总条数
				total: 0
			},
            reportFrom: {
                maintenanceItems: '',
                title: '',
                repairer: '',
                picture: '',
                problemDescription: '',
                houseForRepair:''
            },
            reportFromEdit: {
                id: 0,
                maintenanceItems: '',
                title: '',
                repairer: '',
                picture: '',
                problemDescription: '',
                houseForRepair:''
            },
            householdType: [{value: '0',label: '全部'},{value: '1',label: '业主'}, {value: '2',label: '亲戚'}, {value: '3',label: '租户'}, {value: '4',label: '朋友'}],
            repairStatus: [{value: '0',label: '全部'}, {value: '1',label: '审核中'}, {value: '2',label: '审核通过'}, {value: '3',label: '审核不通过'}],
            preciseqQuery: [{value: '0',label: '住户姓名'}, {value: '1',label: '手机号码'}, {value: '2',label: '证件号码'}],
            options: [{
                value: '家居',
                label: '家居',
                children: [{
                    value: '冰箱',
                    label: '冰箱'
                },{
                    value: '空调',
                    label: '空调'
                },{
                    value: '洗衣机',
                    label: '洗衣机'
                }]
            }, {
                value: '家具',
                label: '家具',
                children: [{
                    value: '定制柜',
                    label: '定制柜'
                }, {
                    value: '油烟机',
                    label: '油烟机'
                }]
            }],
            currentPage4: 1,
            loading: false,//上传的loading
            listLoading: true, // 是否显示loading信息
            dialogFormVisible:false,
            dialogFormVisibles:false,
            dialogFormVisibleEdit:false,
            dialogFormVisibless:false
        }
    },
    mounted () {
		this.getReportList()
	},
    methods: {
        shentong(){
            this.$axios.post('/memberZx/report-for-repair/shenhe',{params: {
					id: this.reportDatas.id,
                    shen: 1
				}
            })
            .then(res => {
                this.message('审核通过', 'success')
                this.getReportList()
                this.dialogFormVisibless = true
            })
        },
        butong(){
            this.$axios.post('/memberZx/report-for-repair/shenhe',{params: {
					id: this.reportDatas.id,
                    shen: 2
				}
            })
            .then(res => {
                this.message('审核不通过', 'success')
                this.getReportList()
                this.dialogFormVisibless = true
            })
        },
        // 查询住户
        baoxiu(){
            this.$axios.get('/memberZx/household/getHouseholdList',{params: {
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
				}
            }).then(res => {
                if (res.data != null) {
                    this.householdData = res.data.obj.content
                    this.page.total = res.data.obj.total
                    this.listLoading = false
                    this.dialogFormVisibles = true
                }
            })
        },
        handleAvatarSuccess (res, file) {
			this.imageUrl = URL.createObjectURL(file.raw)
		},
        beforeAvatarUpload (file) {
			const isJPG = file.type === 'image/jpeg'
			const isPNG = file.type === 'image/png'
			const isLt2M = file.size / 1024 / 1024 < 2
			if (!isJPG && !isPNG) {
				this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			this.imageUrl = URL.createObjectURL(file)
			this.imageFile = file
			return false
		},
        chongzhi(){
            location.reload()
        },
        today(){
            this.ddTime = 0
            this.getReportList()
        },
        yesterday(){
            this.ddTime = 1
            this.getReportList()
        },
        week(){
            this.ddTime = 2
            this.getReportList()
        },
        month(){
            this.ddTime = 3
            this.getReportList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getReportList()
		},
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getReportList()
		},
        p(s) {
            return s < 10 ? '0' + s : s
        },
        householdFrom(data){
            this.dialogFormVisibles = false
            this.reportFrom.repairer = data.id
            this.reportFrom.houseForRepair = data.villageName + data.house
        },
        //获取报修列表信息
        getReportList () {
            if(this.makeDate[0] != undefined || this.makeDate[1] != undefined){
                const d = new Date(this.makeDate[0])
                this.start = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
                const dd = new Date(this.makeDate[1])
                this.end = dd.getFullYear() + '-' + this.p((dd.getMonth() + 1)) + '-' + this.p(dd.getDate())
            }
            this.$axios.get('/memberZx/report-for-repair/getReportList',{params: {
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
                    leixing: this.leixing,
                    maintenanceStatus: this.maintenanceStatus,
                    start: this.start,
                    end: this.end,
                    accurate: this.accurate,
                    accurates: this.accurates,
                    ddTime: this.ddTime,
                    vid: window.sessionStorage.getItem("vid")
				}
            }).then(res => {
                if (res.data != null) {
                    this.reportData = res.data.obj.content
                    this.page.total = res.data.obj.total
                    this.listLoading = false
                    this.imageUrl = ''
                }
            })
        },
        //新增报修单
        saveReport(){
            var formdata = new FormData()
            var maintenanceItems = this.reportFrom.maintenanceItems[0] + "-" + this.reportFrom.maintenanceItems[1]
            const d = new Date(this.reportFrom.orderDate)
            this.orderDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
            formdata.set('maintenanceItems', maintenanceItems)
            formdata.set('title', this.reportFrom.title)
            formdata.set('problemDescription', this.reportFrom.problemDescription)
            formdata.set('repairer', this.reportFrom.repairer)
            formdata.set('ordersDate', this.orderDate)
            formdata.set('houseForRepair', this.reportFrom.houseForRepair)
            formdata.set('residentialQuartersId', window.sessionStorage.getItem("vid"))
            if (this.imageFile.name !== 'File') {
                formdata.set('file', this.imageFile, this.imageFile.name)
            }
            this.$axios.post('/memberZx/report-for-repair/saveReport', formdata)
            .then(res => {
                this.message('新增成功', 'success')
                this.getReportList()
                this.dialogFormVisible = false
                this.reportFrom = {
                    maintenanceItems: '',
                    title: '',
                    repairer: '',
                    picture: '',
                    problemDescription: '',
                    houseForRepair:''
                },
                this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
                this.imageUrl = ''
            })
        },
        // 修改菜单信息
        editReport () {
            var formdata = new FormData()
            var maintenanceItems = this.reportFromEdit.maintenanceItems[0] + "-" + this.reportFromEdit.maintenanceItems[1]
            const d = new Date(this.reportFromEdit.orderDate)
            this.orderDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
            formdata.set('id', this.reportFromEdit.id)
            formdata.set('maintenanceItems', maintenanceItems)
            formdata.set('title', this.reportFromEdit.title)
            formdata.set('problemDescription', this.reportFromEdit.problemDescription)
            formdata.set('repairer', this.reportFromEdit.repairer)
            formdata.set('ordersDate', this.orderDate)
            formdata.set('houseForRepair', this.reportFromEdit.houseForRepair)
            if (this.imageFile.name !== 'File') {
                formdata.set('file', this.imageFile, this.imageFile.name)
            }
            this.$axios.post('/memberZx/report-for-repair/editReport', formdata)
            .then(res => {
                if(res.data){
                    this.message('修改成功', 'success')
                    this.getReportList()
                    this.dialogFormVisibleEdit = false
                    this.reportFromEdit = {
                        id: 0,
                        maintenanceItems: '',
                        title: '',
                        repairer: '',
                        picture: '',
                        problemDescription: '',
                        houseForRepair:''
                    },
                    this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
                    this.imageUrl = ''
                    this.imageFile = File
                }else {
                    this.message('修改失败', 'warning')
                }
            })
        },
        // 修改菜单信息回调赋值
        reportFromCompile (reportFromEdit) {
            this.dialogFormVisibleEdit = true
            this.reportFromEdit = reportFromEdit
            this.reportFromEdit.maintenanceItems = reportFromEdit.maintenanceItems.split('-')
            this.imageUrl = reportFromEdit.picture
        },
        //审核跳转
        reportFromExamine(report){
            this.dialogFormVisibless = true
            this.getReportLists(report)
        },
        //获取报修列表信息
        getReportLists (id) {
            this.$axios.get('/memberZx/report-for-repair/getReportLists?id=' + id).then(res => {
                if (res.data != null) {
                    this.reportDatas = res.data.obj
                    console.log(res.data.obj)
                    this.imageUrl = ''
                }
            })
        },
        // 删除提示弹框
        reportFromDelete (row) {
        this.$confirm('此操作将永久删除该报修单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                this.deleteReport(row)
            })
            .catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                })
            })
        },
        // 删除菜单列表信息
        deleteReport (id) {
        this.$axios.delete('/memberZx/report-for-repair/deleteReport?id=' + id).then(res => {
            this.message('删除成功', 'success')
            this.getReportList()
        })
        },
        message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
    }
}
</script>
<style lang="css" scoped>
/* 上传附件样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.slideDialog{
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.quanping{
    width:100%;
    height:980px;
    background-color:#F0F2F5;
}
.mohu{
    margin-top: 40px;
    width:100%;
    height:280px;
    background-color:white;
}
.zhuye{
    margin-top: 40px;
    width:100%;
    height:620px;
    background-color:white;
}
.suozai{
    padding-top: 10px;
    padding-left: 20px;
    font-size: 14px;
}
.fangke{
    padding-top: 20px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
}
.cha{
    width: 100%;
    height: 50px;
    font-size: 14px;
}
.kuang{
    height: 50px;
    line-height: 50px;
}
.xm{
    width: 200px;
}
.piliang{
    margin-top: 10px;
    width: 100%;
    height: 50px;
}
.xinzen{
    width: 300px;
    margin: 0 auto;
}
.xinzen1{
    width: 300px;
    height: 60px;
    line-height: 60px;
}
.div1{
    height: 120px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.div2{
    height: 250px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.div3{
    height: 100px;
    margin-bottom: 5px;
    margin-top: 5px;
}
</style>